/*
 * 可复用的公有布局
 */
/* ------------注册和登录界面的公共样式---------- */
.bg {
	height: 100%;
	background: url(../../assets/imgs/course-img04.jpg) no-repeat -100px 0px;
	background-size: cover;
	padding: 32px;
	main {
		height: 100%;
		.check {
			right: 0;
			top: 0;
			line-height: 24px;
		}
		.title {
			top: 40px;
			left: 0;
			h1 {
				font-size: 26px;
				font-weight: normal;
				padding-bottom: 10px;
				box-sizing: border-box;
			}
			.subTitle {
				opacity: 0.6;
			}
		}
		form {
			top: 150px;
			left: 0;
			width: 300px;
			.items {
				width: 100%;
				height: 40px;
				margin-bottom: 24px;
				&::after {
					display: block;
					padding: 2px 0 0 16px;
					font-size: 12px;
					color: rgb(255, 54, 54);
					content: attr(data-content);
				}
				input {
					width: 100%;
					height: 40px;
					border-radius: 25px;
					padding-left: 20px;
					background-color: rgba(255, 255, 255, 0.4);
					box-sizing: border-box;
					&::placeholder {
						color: #fff;
						font-size: 14px;
					}
				}
				.captchaInput {
					width: 180px;
				}
				.securityCode {
					width: 100px;
					height: 40px;
					background-color: #38825c;
					opacity: 0.9;
				}
				.btn {
					padding: 0;
					background-color: rgba(56, 130, 91, 0.8);
				}
			}
		}
		.slogan {
			left: 0;
			bottom: 0;
			width: 100%;
		}
	}
}

/* ----------底部Tab样式------------ */
#tabBox {
	width: 100%;
	height: 78px;
	flex-shrink: 0;
}
#bottomTab {
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	z-index: 40;
	background-color: #fff;
	box-shadow: 0 -3px 6px rgba(169, 169, 169, 0.3);
	ul {
		display: flex;
		width: 100%;
		height: 78px;
		color: #8a8a8a;
		li {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 12px;
			&.activeTab {
				color: #4294ff;
			}
			span {
				&:nth-child(1) {
					margin-bottom: 4px;
					font-size: 36px;
				}
			}
		}
	}
}
